<script setup lang="ts">
//取消预约
import {getCancelPre} from "@/api/home/index";
import {ref} from 'vue'
import router from "@/router";
import {showToast} from "vant";
import {useRoute} from "vue-router";

//接收路由id
const route = useRoute()
const id = route.query.id
console.log(id)

let text = ref("")

function cancel() {
    if (text.value == '') {
        showToast({
            message: '请输入取消理由',
            position: 'top',
        });
    } else if(text.value.length > 500){
        showToast({
            message: '最多输入500个字',
            position: 'top',
        });
    }else {
        getCancelPre({
            reason: text.value,
            id: id,
        }).then((item) => {
            console.log(item)
            if (item.code == 200) {
                router.back()
                showToast({
                    message: '提交成功',
                    position: 'top',
                });
            }
        })
    }
}
</script>

<template>
    <div class="box">
        <p>
            <router-link to="bookingC">
                <van-icon name="arrow-left" class="toleft"/>
            </router-link>
            <span>取消理由</span>
        </p>
        <div class="section">
            <textarea style="padding:2vh;width: 100%;height: 55vh;border: 0" v-model="text"
                      placeholder="请输入取消理由"></textarea>
            <p style="height: 10%;text-align: right">0/500&nbsp;&nbsp;&nbsp;&nbsp;</p>
        </div>
        <button class="cancellation" @click="cancel">提交</button>
    </div>
</template>

<style scoped>
.box {
    position: relative;
    min-height: 100vh;
    background-color: #F8F8F8;

    > p {
    //margin-left: 10px; padding: 20px 15px; position: relative;
        background-color: white;

        .toleft {
            font-size: 22px;
        }

        span {
            position: absolute;
            left: 45px;
            font-size: 18px;
        }
    }

    .section {
        margin: 10px auto;
        width: 95%;
        min-height: 50vh;
        background-color: white;
        border-radius: 6px;
    }

    .cancellation {
        position: absolute;
        bottom: 20px;
        left: 3vw;
        padding: 10px;
        width: 94%;
        border: 0;
        border-radius: 5px;
        font-size: 16px;
        background-color: #1989FA;
        color: white;
    }
}
</style>